<template>
  <div ref="echartDomRef" class="h-full"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import type { InitEchartOptoinMethod } from './typing.d'

const props = defineProps<{
  /**
   * 初始化
   */
  initEchartOptoinMethod: InitEchartOptoinMethod
}>()

const $emits = defineEmits<{
  /**
   * echart挂载完毕之后会触发的事件
   */
  echartMounted: [echartsInstance: echarts.ECharts]
}>()

const { initEchartOptoinMethod } = props

const echartDomRef = ref<HTMLDivElement>()
let echartsInstance: echarts.ECharts | undefined

onMounted(onInit)

function onInit() {
  init()
}
async function init() {
  const echartDom = echartDomRef.value
  if (!echartDom) return

  echartsInstance = echarts.init(echartDom, null, { devicePixelRatio: 2 })
  const options = await initEchartOptoinMethod()
  echartsInstance.setOption(options)

  $emits('echartMounted', echartsInstance)
}
</script>

<style scoped></style>
